<script setup>
import { computed, inject, ref } from 'vue'
import { onLoad, onReady, onUnload } from '@dcloudio/uni-app'
import { usePlaylistStore } from '@/stores/playlist'
import { useSongListStore } from '@/stores/songList'
import { usePlayerStore } from '@/stores/player'
import { formatMillion, selectorRectInfo } from '@/common/utils'

// 获取歌单数据和方法
const playlistStore = usePlaylistStore()
// 获取歌曲数据和方法
const songListStore = useSongListStore()
// 获取播放器数据和方法
const playerStore = usePlayerStore()

// 获取父组件传递过来方法
const common = inject('common', null)

// 当前歌单信息
const playlistInfo = computed(() => {
  return Object.assign(
    {},
    {
      ...songListStore.playlistInfo,
      ...playlistStore.playlistInfo,
    }
  )
})

// 收藏图标-切换
const likeName = computed(() => {
  return playlistInfo.value.like ? 'xihuan' : 'xihuan1'
})

// 导航栏字体颜色
const navFontColor = computed(() => {
  return '#ffffff'
})

// 歌单收藏颜色
const collectColor = computed(() => {
  return place.value ? '#a0abff' : '#465cff'
})

// 全部播放按钮样式
const buttonStyle = {
  backgroundColor: 'initial !important',
  color: '#001dff !important',
}

// 歌单封面高度
const profileHeight = ref(0)
const profileScrollTop = ref(0)
const opacity = ref(1)
const place = ref(true)
const invert = ref(0)

// 全部播放-加入队列
const changeAllPlaySong = () => {
  playerStore.setAddAllSongQueue(songListStore.limitSongList)
}

// 点击歌曲
const changeSongItem = (song) => {
  // 显示小播放器
  playerStore.setPlayerStatus({ smallPlayer: true })
  // 获取歌曲事件
  playerStore.setPlayerInfo(song)
}

// 加入播放队列
const changeAddQueue = (song) => {
  playerStore.setAddSongQueue(song)
}

// 收藏歌单
const changeAddLike = () => {
  playerStore.setLikePlaylist(playlistStore.playlistInfo)
}

// 滚动
const handleScroll = (e) => {
  let scrollTop = e.detail.scrollTop
  let totalTop = profileHeight.value - common.navBarHeight.value
  let rang = 1 - scrollTop / totalTop

  // 播放器处理
  common.handleScroll(e)

  // 滚动距离小于等于歌单封面高度
  if (scrollTop <= totalTop) {
    profileScrollTop.value = profileHeight.value - scrollTop
    opacity.value = rang
  } else profileScrollTop.value = common.navBarHeight.value

  // 设置滚动到位标识
  invert.value = (scrollTop / totalTop) * 100
  place.value = scrollTop <= totalTop - 20
}

// 滚动到底部
const handleScrollTolower = () => {
  songListStore.getLimitSongList()
}

onLoad((options) => {
  // 设置页面初始状态
  songListStore.setPageStatus()
  // 获取歌单里面歌曲数据列表
  songListStore.getSongList(parseInt(options.id))
})

onReady(async () => {
  // 获取歌单封面高度
  let profile = await selectorRectInfo('.profile')
  if (profile?.height) profileHeight.value = profile.height
})

onUnload(() => {
  // 设置页面初始状态
  songListStore.setPageStatus()
})
</script>

<template>
  <ty-page
    :loading="songListStore.loading"
    :player-store="playerStore"
    :title="playlistInfo.name"
    :nav-style="{ background: 'inherit' }"
    nav-fixed
    ref="page"
    :title-color="navFontColor"
    :icon-back-color="navFontColor"
  >
    <!-- #ifdef APP || H5 -->
    <template
      #navRight
      v-if="!place"
    >
      <u-icon
        custom-prefix="ty-icon"
        :name="likeName"
        :size="54"
        :color="collectColor"
        @click="changeAddLike"
      ></u-icon>
    </template>
    <!-- #endif -->
    <!-- 歌单封面 -->
    <view
      class="profile"
      :style="[
        {
          backgroundImage: `url(${
            playlistInfo.coverImgUrl || playlistInfo.picUrl
          })`,
          opacity: opacity >= 0.3 ? opacity : 0.3,
        },
        profileScrollTop > 0 ? { height: `${profileScrollTop}px` } : '',
      ]"
    >
      <!-- <view class="description">{{
          playlistInfo.description
        }}</view> -->
      <view
        class="play-sketch"
        v-if="playlistInfo.coverImgUrl || playlistInfo.picUrl"
        :style="{ opacity: opacity < 1 ? opacity - 0.3 : 1 }"
      >
        <!-- 统计 -->
        <view
          class="play-sketch--count"
          v-if="playlistInfo.playCount"
        >
          <u-icon
            custom-prefix="ty-icon"
            name="yinle"
            color="#a0abff"
            label-color="#ecf5ff"
            :label="formatMillion(playlistInfo.playCount)"
            :size="40"
          ></u-icon>
        </view>
        <!-- 歌单标签 -->
        <view
          class="play-sketch--tags"
          v-if="playlistInfo.tags?.length > 0"
        >
          <u-tag
            type="primary"
            mode="light"
            shape="circle"
            color="#a0abff"
            border-color="#e9ebff"
            v-for="(tab, index) in playlistInfo.tags"
            :key="index"
            :text="tab"
          />
        </view>
        <!-- 播放全部按钮 -->
        <view class="play-sketch--button">
          <u-button
            type="primary"
            size="mini"
            shape="circle"
            plain
            ripple
            :custom-style="buttonStyle"
            @click="changeAllPlaySong"
            ><u-icon
              name="play-right-fill"
              :label="`全部播放(${songListStore.limitSongList.length})`"
              label-color="inherit"
            ></u-icon>
          </u-button>
        </view>
        <!-- 收藏功能 -->
        <view class="play-sketch--collect">
          <u-icon
            custom-prefix="ty-icon"
            :name="likeName"
            :size="54"
            :color="collectColor"
            @click="changeAddLike"
          ></u-icon>
        </view>
      </view>
    </view>
    <!-- 歌曲列表 -->
    <view class="song-list-content">
      <ty-song-list
        :list="songListStore.limitSongList"
        :load-status="songListStore.loadStatus"
        :player-info="playerStore.playerInfo"
        is-add
        @click="changeSongItem"
        @add-queue="changeAddQueue"
        @scroll="handleScroll"
        @scroll-tolower="handleScrollTolower"
      ></ty-song-list>
    </view>
  </ty-page>
</template>

<style lang="scss" scoped>
$pic-height: 600rpx;

.profile {
  background-repeat: no-repeat;
  background-size: cover;
  height: $pic-height;
  position: relative;
  overflow: hidden;
  transition: all 0s;
  &:before,
  &:after {
    content: '';
    background: inherit;
    filter: blur(100rpx) brightness(50%);
    height: 140rpx;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
  }
  &:before {
    top: 0;
  }
  &:after {
    bottom: 0;
  }
  .description {
    background-color: rgba($color: $u-type-primary, $alpha: 0.5);
    border-top-right-radius: $ty-border-radius;
    border-bottom-right-radius: $ty-border-radius;
    position: absolute;
    color: $u-bg-color-inverse;
    font-size: 28rpx;
    top: calc(100rpx + var(--navbar-height));
    width: 300rpx;
    padding: $ty-lg-padding;
  }
}

// .play-count {
//   $count-top: calc(50rpx + var(--navbar-height));
//   display: flex;
//   flex-direction: column;
//   flex-wrap: wrap;
//   align-items: center;
//   background-color: rgba($color: $u-type-primary, $alpha: 0.5);
//   border-radius: $ty-border-radius;
//   padding: $ty-sm-padding $ty-md-padding;
//   position: absolute;
//   top: $count-top;
//   right: 10rpx;
//   &:before {
//     content: '';
//     width: 1rpx;
//     height: $count-top;
//     background-color: $u-type-primary-disabled;
//     position: absolute;
//     top: 0;
//     left: 50%;
//     transform: translate(-50%, -100%);
//   }
// }

.play-sketch {
  position: absolute;
  left: $ty-lg-padding;
  right: $ty-lg-padding;
  bottom: $ty-md-padding;
  @include ty-flex-row;
  @include ty-col-center;
  z-index: 10;
  &--button {
    position: absolute;
    bottom: 70rpx;
    left: 50%;
    transform: translateX(-50%);
    &-count {
      font-size: 20rpx;
    }
  }
  &--tags {
    flex: 1 1 auto;
    :deep(.u-tag) {
      margin-left: $ty-lg-padding;
    }
  }
  &--count {
    @include ty-flex;
    @include ty-col-center;
  }
  &--collect {
    flex: 1 1 auto;
    @include ty-flex;
    @include ty-row-right;
  }
}

.play-tags {
  @include ty-flex-row;
  @include ty-col-center;
}

.song-list-content {
  position: relative;
  flex: 1;
  overflow: hidden;
}
</style>
